<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Register</title>
    <link rel="stylesheet" type="text/css" href="./css/conter.css">
    <link rel="stylesheet" type="text/css" href="./css/foot.css">
    <link rel="stylesheet" type="text/css" href="./css/register.css">

</head>

<body>
    <header id="top">
        <div class="top">
            <img src="./img/logo.png" alt="">
            <span>欢迎注册</span>
        </div>
    </header>
    <div id="container">
        <div class="panel rt">
            <!-- /v1/users/reg -->
            <form id="form-register" method="post" action="#">
                <div class="txt">
                    <p style="font-size: 18px;">新用户注册
                        <span>
                            <a href="login.html">直接登录</a>
                        </span>
                    </p>
                </div>
                <div class="form-group">
                    <label for="uname">用户名：</label>
                    <input autocomplete="" required="" minlength="6" maxlength="9" type="text" placeholder="请输入用户名"
                        autofocus="" name="uname" id="uname">
                    <span id="msg" style="color: red;"></span>
                </div>
                <div class="form-group">
                    <label for="upwd">登录密码：</label>
                    <input required="" type="password" minlength="6" maxlength="12" placeholder="请输入密码" name="upwd"
                        autofocus="" id="upwd">
                </div>
                <div class="form-group">
                    <label for="upwdconfirm">确认密码：</label>
                    <input required="" type="password" minlength="6" maxlength="12" placeholder="请确认密码" name=""
                        autofocus="" id="upwdconfirm">
                </div>
                <div class="form-group">
                    <label for="email">邮箱：</label>
                    <input autocomplete="" required="" type="email" placeholder="请输入邮箱地址" name="email" id="email">
                </div>
                <div class="form-group">
                    <label for="phone">手机号：</label>
                    <input id="phone" name="phone" placeholder="请输入您的手机号"
                        pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$"
                        required="" type="text">
                </div>
                <div class="form-group">
                    <label></label>
                    <input style="width: 279px; border-color: #27b0f6;" type="button"
                        onclick="upload()" value="提交注册信息" id="bt-register">
                </div>
            </form>
        </div>
    </div>
    <div id="showResult"></div>
    <script>
        let xmlhttp;
        let msg = document.getElementById('msg');
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest;
        } else {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        function upload() {
            let formdata;
            let uname = document.getElementById('uname').value;
            let upwd = document.getElementById('upwd').value;
            let email = document.getElementById('email').value;
            let phone = document.getElementById('phone').value;
            xmlhttp.onreadystatechange = () => {
                console.log(11);
                if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                    msg.innerHTML = JSON.parse(xmlhttp.responseText).msg;
                    console.log('msg.innerHTML: ', msg.innerHTML);
                }
            }
            xmlhttp.open('POST', 'http://127.0.0.1:8080/v1/users/reg', true);
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            formdata = `uname=${uname}&upwd=${upwd}&email=${email}&phone=${phone}`;
            xmlhttp.send(formdata);
        }
    </script>
    <div id="foot_box">
        <div class="icon1 lf">
            <img src="./img/4.png" alt="">
            <h3>品质保障</h3>
        </div>
        <div class="icon2 lf">
            <img src="./img/5.png" alt="">
            <h3>私人定制</h3>
        </div>
        <div class="icon3 lf">
            <img src="./img/6.png" alt="">
            <h3>学员特供</h3>
        </div>
        <div class="icon4 lf">
            <img src="./img/7.png" alt="">
            <h3>专属特权</h3>
        </div>
    </div>
    <div class="foot_bj">
        <div id="foot">
            <div class="lf">
                <p class="footer1"><img src="./img/logo.png" alt="" class=" footLogo"></p>
                <p class="footer2"><img src="./img/9.png" alt=""></p>
            </div>
            <div class="foot_left lf">
                <ul>
                    <li><a href="#">
                            <h3>买家帮助</h3>
                        </a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">服务保障</a></li>
                    <li><a href="#">常见问题</a></li>
                </ul>
                <ul>
                    <li><a href="#">
                            <h3>商家帮助</h3>
                        </a></li>
                    <li><a href="#">商家入驻</a></li>
                    <li><a href="#">商家后台</a></li>
                </ul>
                <ul>
                    <li><a href="#">
                            <h3>关于我们</h3>
                        </a></li>
                    <li><a href="#">关于达内</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li>
                        <img src="./img/10.png" alt="">
                        <img src="./img/11.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="service">
                <p>学子商城客户端</p>
                <img src="./img/12.png" class="lf">
                <img src="./img/13.png" alt="" class="lf">
            </div>
            <div class="download">
                <img src="./img/14.png">
            </div>
            <div class="record">
                ©2017 达内集团有限公司 版权所有 京ICP证xxxxxxxxxxx
            </div>
        </div>
    </div>
</body>

</html>